<script setup lang="ts">
import { routes } from '@/router'
import { computed, ref, type CSSProperties } from 'vue'
import { RouterView, RouterLink } from 'vue-router'

const containerRef = ref<HTMLDivElement | null>()
const linkRef = ref<HTMLDivElement | null>()

const viewStyle = computed<CSSProperties>(() => {
  const CNTRHeight = containerRef.value?.offsetHeight ?? 0
  const linkHeight = linkRef.value?.offsetHeight ?? 0

  return {
    height: `${CNTRHeight - linkHeight}px`,
    width: '100%',
    border: '1px dashed black',
    boxSizing: 'border-box',
  }
})
</script>

<template>
  <div ref="containerRef" class="container">
    <div ref="linkRef" style="display: flex; padding: 10px 0; box-sizing: border-box">
      <template v-for="(item, index) in routes" :key="index">
        <div style="width: 100px; text-align: center">
          <RouterLink :to="{ path: item.path }">{{ item.cmpName }}</RouterLink>
        </div>
      </template>
    </div>
    <div :style="viewStyle">
      <RouterView />
    </div>
  </div>
</template>

<style scoped>
.container {
  height: 100%;
}
</style>
